<%@ page import="java.sql.Date" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String basePath = request.getScheme() + "://" +
            request.getServerName() + ":"
            + request.getServerPort() +
            request.getContextPath() + "/";
%>
<html>
<head>
    <title>用户登录</title>
    <base href="<%=basePath%>">
    <link rel="stylesheet" href="static/bootstrap-3.3.7/css/bootstrap.min.css">
    <script type="text/javascript" src="static/js/jquery-3.5.1.min.js"></script>
    <script type="text/javascript" src="static/bootstrap-3.3.7/js/bootstrap.min.js"></script>
    <script>
        //当dom加载后执行
        $(function () {
            updateCheckCode();
            showErrorMsg();
            $("#submit").click(function () {
                checkForm();
            });
            function showErrorMsg() {
                if ($("#errorMsg").text().length == 195){
                    //说明内容为空
                    $("#errorMsg").css("display","none");
                }else {
                    $("#errorMsg").css("display","block");
                }
            }
            function checkForm() {
                var pass = true;
                if (!checkUsername()) {
                    $("#u_error").css('display', 'block');
                    pass = false;
                } else {
                    $("#u_error").css('display', 'none');
                }
                if (!checkPassword()) {
                    pass = false;
                    $("#p_error").css('display', 'block');
                } else {
                    $("#p_error").css('display', 'none');
                }
                if (!checkCode()) {
                    pass = false;
                    $("#c_error").css('display', 'block');
                } else {
                    $("#c_error").css('display', 'none');
                }
                if (!pass) {
                    $("#form").attr("onsubmit", "return false")
                } else {
                    $("#form").attr("onsubmit", "return true")
                }
            }

            function checkUsername() {
                //1.获取元素
                //2.获取value值
                var username = $("#username").val();
                if (username == "") {
                    $("#u_error").text("请输入用户名");
                    return false;
                }
                return true;
            }

            function checkPassword() {
                var password = $("#password").val();
                if (password == "") {
                    $("#p_error").text("请输入密码");
                    return false;
                }
                return true;

            }

            function checkCode() {
                var code = $("#code").val();
                if (code == "") {
                    //在表单中如果用户没有填写，则是空字符串
                    $("#c_error").text("请输入验证码");
                    return false;
                } else if (code.length != 4) {
                    $("#c_error").text("验证码格式错误");
                    return false;
                }
                return true;
            }

            //更新验证码
            function updateCheckCode() {
                $("#change").click(function () {
                    // alert("测试图片单击事件");
                    <%--//alert(<%=new java.util.Date().getTime()%>);--%>
                    //错误写法
                    //不要使用java的date对象，否则速度很慢，应该使用js
                    <%--$("#change").attr("src","user/checkCode.do?"+<%=new java.util.Date().getTime()%>);--%>
                    //$("#change").src = "user/checkCode.do?"+<%=new java.util.Date().getTime()%>;
                    <%--$("#change").setAttribute("src","user/checkCode.do?"+<%=new java.util.Date().getTime()%>);--%>
                    refreshCode();
                });
                $("#cImage").click(function () {
                    // alert("测试链接点击");
                    refreshCode();
                });
            }

            function refreshCode() {
                $("#change").attr("src", "admin/checkCode.do?time=" + new Date().getTime());
            }
        })
    </script>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-4 col-md-offset-4" style="margin-top: 50px">
            <h1 style="text-align: center">管理员登录</h1>
            <form action="admin/login.do" method="post" id="form">
                <div class="row">
                    <div class="form-group">
                        <label for="username">用户名</label>
                        <br>
                        <span style="color: red;display: none" id="u_error"></span>
                        <input type="text" class="form-control" id="username" name="username" placeholder="请输入用户名">
                    </div>
                </div>
                <div class="row">
                    <div class="form-group">
                        <label for="password">密码</label>
                        <br>
                        <span style="color: red;display:none" id="p_error"></span>

                        <input type="text" class="form-control" id="password" name="password" placeholder="请输入密码">
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-5" style="padding: 0">
                        <div class="form-group">
                            <label for="code">验证码</label>
                            <br>
                            <span style="color: red;display:none" id="c_error"></span>
                            <input type="text" class="form-control" id="code" name="code" placeholder="请输入验证码">
                        </div>
                    </div>
                    <div class="col-md-3" style="margin-top: 9px;padding: 0;padding-left: 15px">
                        <img id="change" src="admin/checkCode.do" alt="验证码" title="看不清点击刷新">
                    </div>
                    <div class="col-md-4" style="padding: 0;padding-left: 15px;line-height: 74px;text-align: center">
                        <span><a href="javascript:;" id="cImage" style="text-decoration: none">看不清换一张</a></span>
                    </div>
                </div>
                <div class="row">
                    <%--                    <div class="col-md-7 col-md-offset-5" style="padding-left: 15px">--%>
                    <%--                        <span style="color: red">--%>
                    <%--                            <%= request.getAttribute("error") == null ? "" : request.getAttribute("error")%>--%>
                    <%--                            <%= request.getSession().getAttribute("error") == null ? "" : request.getSession().getAttribute("error")%>--%>
                    <%--                        </span>--%>
                    <%--                    </div>--%>
                    <div class="col-md-8 col-md-offset-2" style="text-align: center" id="errorMsg">
                        <div class="alert alert-warning alert-dismissible" role="alert">
                            <strong>
                                <%= request.getAttribute("error") == null ? "" : request.getAttribute("error")%>
                                <%= request.getSession().getAttribute("error") == null ? "" : request.getSession().getAttribute("error")%>
                            </strong>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-2 col-md-offset-4">
                        <button type="submit" class="btn btn-primary btn-lg" id="submit">
                            &nbsp;&nbsp;&nbsp;登录&nbsp;&nbsp;&nbsp;
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
</body>
</html>
